<!DOCTYPE html>
<html>
	<head>
		<title>我的考勤(日考勤)</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
		<script src="js/flexible.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body class="Summary">
		<div id="myAttendanceDailySummary" >
			<div class="title">
				<div class="titleCont">
					<div class="headPortrait">
		  			<img onload="imgClass(event)" :src="headImg?imgUrl+headImg:'image/icon_group_normal.png'"/>
		  		</div>
		  		<div class="text">
		  			<p v-text="realName"></p>
		  		</div>
		  		<div class="time" v-text="completeToday">
		  			
		  		</div>
				</div>
			</div> 
			<div id="calendar">
				<ul class="dateHead">
					<li>日</li>
					<li>一</li>
					<li>二</li>
					<li>三</li>
					<li>四</li>
					<li>五</li>
					<li>六</li>
				</ul>
				<ul class="dateCont">
					<li v-for="dateNum in dateArr" :class="{active:today.dateItem==dateNum.dateItem}" @click="dateNum?getDate(dateNum):null" v-cloak>
						{{dateNum.n}}
						<span :class="{normal:dateNum.state==0,'abnormal':dateNum.state!=undefined?dateNum.state!=0:null}"></span>
					</li>
				</ul>
			</div>
			<div class="attendanceQuantity">
				今日打卡<span v-text="attenList?attenList.length:0"></span>次<!--，工时共计<span>10</span>分钟-->
			</div>
			<ul class="attendanceRecord"  v-cloak   id="ad" ref="nana">
				<li v-for="(list,index) in attenList">
					<div class="left">
						<span v-text="list.text"></span>
						<div class="line" v-show="index!=attenList.length-1"></div>
					</div>
					<div class="right">
						<p><a v-text="list.text"></a>班打卡时间 <a v-text="list.time"></a></p>
						<p>
							<img src="image/dingwei.png"/>
							<span v-text="list.attenAddr"></span>
						</p>
						<div class="attendanceStatus">
							<span :class="list.NewaddrStatus" v-text="list.addrStatus?'异常':'正常'"></span>
							<span class="face" v-show="list.attenway==1">人脸图像</span>
						</div>
					</div>
				</li>


			</ul>
		</div>

		<script src="js/vue.min.js"></script>
		<!--<script src="zgbHtml.js/vue.min.zgbHtml.js"></script>-->
		<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	  <script src="js/axios.min.js"></script>
	  <script src="js/message.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				var vm = new Vue({
					el:"#myAttendanceDailySummary",
					data:{
						//日历
						dateArr:[],
						today:'',
						completeToday:"",
						attenList:[],
						attendDate:'',
						oDataState:{},
						realName:'',
						headImg:''
					},
					methods:{
						createCalendar:function(){//创建日历函数
							function leapYear(year) {
								var y;
							  return (year%100==0?y=(year%400==0?1:0):y=(year%4==0?1:0));
							}

							if (this.attendDate) {
								var oDate=new Date(this.attendDate+'-01');
								var year=oDate.getFullYear();
								var month=oDate.getMonth();
							}else{
								var oDate=new Date();
								var year=oDate.getFullYear();
								var month=oDate.getMonth();
							}

							this.today={
								dateItem : oDate.getFullYear() +"-"+ two(oDate.getMonth()+1) +"-"+ two(oDate.getDate())
							};

							var arr = [];
							var firstdayMonth=new Date(year,month,1);
							var firstDayWeek=firstdayMonth.getDay();
							var allDay=new Array(31,28+leapYear(year),31,30,31,30,31,31,30,31,30,31);
							var dateNum = firstDayWeek+allDay[month];
							for (var i=1;i<=dateNum;i++) {
								if (i<=allDay[month]) {
									arr.push({
										n:i,
										dateItem:year+'-'+two(month+1)+'-'+two(i),
										state:this.oDataState[year+'-'+two(month+1)+'-'+two(i)]//==undefined?-1:this.oDataState[year+'-'+two(month+1)+'-'+two(i)]
									});
								} else{
									arr.unshift('');
								}
							}
							/*this.a=arr;*/
							this.dateArr = arr;
							console.log(this.dateArr)

						},
						getDate:function(currentDate){
							this.today = {
								dateItem : currentDate.dateItem
							};
							axios.get(url+"/getGroupAttenDayCountStatusDetailed",{
								params:{
									projectId:GetQueryString("projectId"),
									groupId:GetQueryString("groupId"),
									attendDate:currentDate.dateItem,
									workerId:GetQueryString("workerId")
                                   /* projectId:GetQueryString("projectId")||"10639 ",
                                    groupId:GetQueryString("groupId")||"0",
                                    attendDate:currentDate.dateItem,
                                    workerId:GetQueryString("workerId")||"670"*/
								},
								headers:{"token":GetQueryString("token")}
                                //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
							}).then(function(data){
								var iWeek = new Date(this.today.dateItem).getDay();
								if( iWeek === 0 ) iWeek = '星期日';
								if( iWeek === 1 ) iWeek = '星期一';
								if( iWeek === 2 ) iWeek = '星期二';
								if( iWeek === 3 ) iWeek = '星期三';
								if( iWeek === 4 ) iWeek = '星期四';
								if( iWeek === 5 ) iWeek = '星期五';
								if( iWeek === 6 ) iWeek = '星期六';

								var total = 0;
								if (data.data.data) {
									for (var i=0,list=data.data.data;i<list.length;i++) {
										total += list[i].attenTime
										var oDate = new Date(list[i].attenTime)
										list[i].time=oDate.getHours()+":"+two(oDate.getMinutes())

										if (list[i].addrStatus) {
											list[i].NewaddrStatus = 'abnormal'
										}else{
											list[i].NewaddrStatus = 'normal'
										}

										if (list[i].attenStatus) {
											if (list[i].attenStatus.indexOf('S')!=-1) {
												list[i].text = "上"
											} else{
												list[i].text = "下"
											}
										}else{
											list[i].text = "　"
										}

									}
								}

								this.completeToday = this.today.dateItem+' '+iWeek;
								this.attenList = data.data.data;
							}.bind(this))
						},
						getDateState:function(){
							if (this.attendDate) {
								this.attendDate = this.attendDate
							}else{
								var oDate=new Date();
								var year=oDate.getFullYear(); 
								var month=oDate.getMonth();
								var time = year+'-'+two(month+1)
							}
							axios.get(url+"/getAttendDateMsg",{
								params:{
									groupId:GetQueryString("groupId"),
									month:time?time:this.attendDate,
									workerId:GetQueryString("workerId")
                                    /*groupId:GetQueryString("groupId")||"10639",
                                    month:time?time:this.attendDate,
                                    workerId:GetQueryString("workerId")||"670"*/
								},
								headers:{"token":GetQueryString("token")}
                                //headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlR1ZSBBdWcgMTUgMTc6MTQ6MzAgQ1NUIDIwMTcifQ.S6k4iRxnqEKtoWT4DiSYEVchOAFy1VaivQM2nXoaORsuserId:679"}
							}).then(function(data){
								console.log(data)
								this.oDataState = data.data.data
								this.createCalendar();
								this.getDate(this.today)
								/*document.body.style.height=300+"px";
								document.getElementById("ad").style.height=60*data.data.data.length+'px';*/
							}.bind(this))
						},
						setDate:function(date){
							this.attendDate = date;
							this.getDateState();
						}
					},
					mounted:function(){
				  	this.$nextTick(function(){   // 文档加载后调用
				  		this.realName = GetQueryString('realName');
				  		this.headImg = GetQueryString('headImg');
				  		this.getDateState();
						});
				  }
				});
		</script>
	</body>
</html>
